<!DOCTYPE html>
<html>
<head>
<title>Webkit Quirks</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css"/>
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="../../js/qunit/reporter.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/tinymce_loader.js"></script>
<script>
	var editor, rng;

	QUnit.config.reorder = false;
	QUnit.config.autostart = false;

	module("WebKit Quirks Tests", {
		autostart: false
	});

	if (tinymce.isWebKit) {
		test('Delete from beginning of P into H1', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';
			setSelection('p', 0);
			editor.execCommand('Delete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab</h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('Delete whole H1 before P', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';

			rng = editor.selection.getRng();
			rng.setStartBefore(editor.getBody().firstChild);
			rng.setEndAfter(editor.getBody().firstChild);
			editor.selection.setRng(rng);

			editor.execCommand('Delete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>b<br></h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('Delete from beginning of P with style span inside into H1', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b<span style="color:red">c</span></p>';
			setSelection('p', 0);
			editor.execCommand('Delete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab<span data-mce-style="color:red" style="color:red">c</span></h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('ForwardDelete from end of H1 into P', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';
			setSelection('h1', 1);
			editor.execCommand('ForwardDelete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab</h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('ForwardDelete whole H1 before P', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';

			rng = editor.selection.getRng();
			rng.setStartBefore(editor.getBody().firstChild);
			rng.setEndAfter(editor.getBody().firstChild);
			editor.selection.setRng(rng);

			editor.execCommand('ForwardDelete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>b<br></h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('ForwardDelete from end of H1 into P with style span inside', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b<span style="color:red">c</span></p>';
			setSelection('h1', 1);
			editor.execCommand('ForwardDelete');
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab<span data-mce-style="color:red" style="color:red">c</span></h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('Backspace key from beginning of P into H1', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';
			setSelection('p', 0);
			editor.fire("keydown", {keyCode: 8});
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab</h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});

		test('Delete key from end of H1 into P', function() {
			editor.getBody().innerHTML ='<h1>a</h1><p>b</p>';
			setSelection('h1', 1);
			editor.fire("keydown", {keyCode: 46});
			equal(cleanHtml(editor.getBody().innerHTML), '<h1>ab</h1>');
			equal(editor.selection.getStart().nodeName, 'H1');
		});
	} else {
		test("Skipped since the browser isn't WebKit", function() {
			ok(true, "Skipped");
		});
	}

	tinymce.init({
		mode : "exact",
		plugins: 'table',
		elements : "elm1",
		indent: false,
		init_instance_callback : function(ed) {
			editor = ed;
			QUnit.start();
		}
	});
</script>
</head>
<body>
<h1 id="qunit-header">Webkit Quirks</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="content">
<textarea id="elm1" name="elm1"></textarea>

<div>
	<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
	<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
</div>
</div>
</body>
</html>
